
/*
* 
* Este arquivo CSS servirá para acrescentar estilos extras ou overridings de regras do Bootstrap
* 
* Vou colocar regras para todas as telas a fim de centralizar os estilos
* 
*/

html {
	background:url("../img/background.png") repeat scroll 0 0 #610b54 !important;
}

body {
	background:transparent !important;
}

em{
	color: #FFBB00;
}

h1{
	font-size:52px !important;
}

.wrapper{
	margin: 40px auto;
	width:  800px;
	height: 580px;

	overflow:hidden;
}

.slider{
	height:550px;
	width: 8200px;
}


.slider h1 {
	margin-bottom:0.5em;
}

.slider p{
	margin-top:0.5em;
}			

.carousel-control:hover{
	cursor:pointer;
}

.tela{
	width:800px;
	height:580px;
	-moz-box-sizing: border-box;
   	box-sizing: border-box;	
	overflow: hidden !important;

	float:left;
	padding: 1em !important;
}

#logo {
	float:left;
	margin-right:5px;
	margin-left:5px;
	width:25%;
}

#presentation {
	float:left;
	width:72%;
}

#presentation label{
	float:right;
	padding: 1em;
	font-size:24px;
	color:#26C;
}

.btn{
	float:right;
}

.hero-unit {
	/*color:#deccdb;*/
	color:#ffffff;
	
	border:1px solid #ffffff;
	box-shadow:0px 0px 20px #ffffff;
	
	background-color:rgba(30, 5, 25, 0.9);
	background-image:-moz-linear-gradient(to bottom, #4a264a, #000000);
	
	overflow:hidden;
	padding:10px;

	height: 100%;
	-moz-box-sizing: border-box;
   	box-sizing: border-box;	
}
.hero-unit h1 {
	text-shadow:0px 2px 0px #000000;
}
.hero-unit p {
	text-shadow:0px 1px 0px #000000;
}


.dma-slider{
	width: 2000px;
	height: 300px;
	overflow: hidden;
	margin-left:0px;
}

.dma-wrapper{
	position:relative;
	left:50%;
	margin-left: -250px;
	width: 500px;
	height: 125px;
	overflow: hidden;	
}

.dma-item{
	-moz-box-sizing: border-box;
   	box-sizing: border-box;	
	padding: 0.25em;	
	display:inline-block;
	float:left;	
}

.dma-item-img{
	width: 100%;
	height: 100%;
}

.ator-tool-selection{
	text-align:center;
}

.ator-tool-selection label{
	display:inline-block;
}

/*******POSTER COLLECTION********/

	.poster-collection{
		width: 600px;
		height:	360px;
		position: relative;
		left: 50%;
		margin-left: -300px;
	}

	.poster-collection-content{
		width: 180px;
		height: 220px;
		padding: 20px;

		display: inline-block;
		-moz-box-sizing: border-box;
	   	box-sizing: border-box;	
		cursor: pointer;
	}

	.poster-collection-container{
		width:180px;
		height:300px;
		
		display: inline-block;
		-moz-box-sizing: border-box;
	   	box-sizing: border-box;	
	   	vertical-align: top;
	}

	.poster-collection-info{
		font-size: 10px;
		text-align: center;
		width: 100%;
		height: 100%;
		line-height:1.5em;
	}

	.poster-collection-info span{
		font-size: 12px;								
		text-decoration: underline;
	}	

	.poster-collection-info p{
		font-size: 12px;								
		font-weight: bold;
		background-color: orange;
		padding: 0.64em;
	}								

	.poster-collection-big-info{
		font-size: 14px;
		display:inline-block;
		vertical-align: top;
		width:280px;
		padding:10px;
	}

	.poster-collection-big-info p{
		font-size: 16px;
		text-decoration: underline;
	}

	.poster-collection img{
		width: 100%;
		height: 100%;
	}


/******FB COMMENT BOX ******/

	.fb-comment-container{
		margin-top:4px;
		width:350px;
		height:100%;
		background-color: #EDEFF4;
	}

	.fb-comment-container div{
		font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
		
		font-size: 11px !important;										
		color: black;			
	}

	.fb-comment-content{
		margin-top:4px;
		width: 280px;
		position:relative;
	}

	.fb-comment-content span{
		font-weight: bold;
		color: #3B5998;
		padding-right: 4px;				
	}

	.fb-comment-content img{
		position:absolute;
		top: 8px;
		left: 8px;
		width: 32px;
		height: 32px;
	}	

	.fb-comment-info{								
		position: relative;
		left:44px;
		top:4px;
		line-height: 1.5em;
	}

	.fb-comment-info p{
		color:gray;
		text-shadow:none;
		text-decoration: none;
		font-size: 11px !important;	
	}


.check-answers{
	margin-bottom:2em;
}

.check-answers p{
	font-size:16px;
}

.check-answers p em{
	font-size:18px;
}

#agradecimento{
	display:none;
	width:760px;
	height:515px;
	vertical-align:middle;
	position:relative;
	text-align:center;
}

#agradecimento img{
	position:relative;
	top:50%;
	margin-top:-99px;
	width:200px;
	height:198px;
	float:left;
	margin-left:120px;
}

#agradecimento div{
	position:relative;
	display:inline-block;
	top:50%;
	font-size:30px;
	line-height:2em;
	margin-top:-60px;
}

.restart{
	float:left;
}

.admin-tela{
	width:800px;
	height:600px;
	margin:0 auto;

	position:absolute;
	top:50%;
	left:50%;
	margin-top:-300px;
	margin-left:-400px;
}

.mytable tr td em{
	font-weight: bold;
	font-size:16px;
	color: gray;
}

.mytable tr td{
	text-align: center;
}

.mytable tr td span{
	font-size:24px;
	color:orange;	
}

.form-login{
	width:500px;
	height:60px;

	position:absolute;
	top:50%;
	left:50%;
	margin-left:-250px;
	margin-top:-30px;
}

.admin-btn{
	margin-right: 1em;
}

.tela-2-controls{
	position:relative;
	height:60px;
	width: 700px;
	top:5%;
	left: 50%;
	margin-left:-350px;
}

.tela-2-controls button{
	margin:0em 1em;
}


.message-div{
	text-align:center;
	margin-top:2em;
	width:700px;
	left:50%;
	margin-left: -350px;
	position:relative; 
	height:80px;
}

.message-div p{
	font-size: 24px;
	display:none;
}

.tela-2-debug-info{
	width: 700px;
	height: 300px;
	left:50%;
	margin-left: -350px;
	position: relative;
	top:8%;
	display:none;
}

.tela-2-debug-info button{
	display:none;
	margin-top:1em;
}					

.tela-2-debug-message{
	margin:0.32em 0em;
	text-align:center;
}			

.tela-2-debug-friends{
	text-align: center;
}

.tela-2-debug-friends img{
	height:100px;
	width: 100px;
}

.tela-2-friend{
	text-align: center;						
	margin:0.64em;
	display:inline-block;
}

.tela-2-friend label{
	width: 100px;
}				

/*
* 
* Regras para index.html
* 
*/

